<template>
  <div class="post">
    <div class="post-header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="form">
        <el-form-item label="" prop="smartstatus" v-if="title == '智能设备'">
          <el-select v-model="formInline.smartstatus" placeholder="智能设备状态">
            <el-option label="完好" value="1"></el-option>
            <el-option label="待维修" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="familystatus" v-if="title == '家居设备'">
          <el-select v-model="formInline.familystatus" placeholder="家居设备状态">
            <el-option label="完好" value="1"></el-option>
            <el-option label="待维修" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="value">
          <el-date-picker v-model="formInline.value" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="" prop="homenum">
          <el-input v-model="formInline.homenum" placeholder="房号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="post-main">
      <div class="main-title">
        <span @click="handleTitle(1)" ref="znsb">智能设备</span>
        <span @click="handleTitle(2)" ref="jjsb">家居设备</span>
        <span></span>
      </div>
      <div class="main-con" v-if="title == '智能设备'">
        <el-table :data="tableData" border style="width: 100%">

          <el-table-column prop="unitname" label="单元名称" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.unitname == null">暂无</span>
              <span v-else>{{ scope.row.unitname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="buildnum" label="幢号" width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.buildnum == null">暂无</span>
              <span v-else>{{ scope.row.buildnum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homenum" label="房号">
            <template slot-scope="scope">
              <span v-if="scope.row.homenum == null">暂无</span>
              <span v-else>{{ scope.row.homenum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homename" label="房主">
            <template slot-scope="scope">
              <span v-if="scope.row.homename == null">暂无</span>
              <span v-else>{{ scope.row.homename }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="washnum" label="空调">
            <template slot-scope="scope">
              <span v-if="scope.row.washnum == null">暂无</span>
              <span v-else>{{ scope.row.washnum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="wifiname" label="WI-FI">
            <template slot-scope="scope">
              <span v-if="scope.row.wifiname == null">暂无</span>
              <span v-else>{{ scope.row.wifiname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="airnum" label="洗衣机">
            <template slot-scope="scope">
              <span v-if="scope.row.airnum == null">暂无</span>
              <span v-else>{{ scope.row.airnum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="授予时间" width="200">
            <!-- 插槽 -->
            <template slot-scope="scope">
              {{ scope.row.createtime.substring(0, 10) }} {{ Number(scope.row.createtime.substring(11, 13)) + 8 }}
              {{ scope.row.createtime.substring(13, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="smartstatus" label="状态">
            <!-- 插槽 -->
            <template slot-scope="scope">
              <div v-if="scope.row.smartstatus == 1">完好</div>
              <div v-else>待维修</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="状态操作" width="200px" prop="smartstatus">
            <template slot-scope="scope">
              <el-tooltip :content="'Switch value: ' + scope.row.smartstatus" placement="top">
                <el-switch v-model="scope.row.smartstatus" active-color="#409eff" inactive-color="#dcdfe6"
                  :active-value="1" :inactive-value='2' @change=handleClick(1,scope.row)>
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="iPagination.currentPage" :page-sizes="iPagination.pageSizes" :page-size="iPagination.pageSize"
          layout="total, sizes, prev, pager, next" :total="iPagination.total">
        </el-pagination>
      </div>
      <div class="main-con" v-if="title == '家居设备'">
        <el-table :data="tableData" border style="width: 100%">

          <el-table-column prop="unitname" label="单元名称" width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.unitname == null">暂无</span>
              <span v-else>{{ scope.row.unitname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="buildnum" label="幢号" width="60">
            <template slot-scope="scope">
              <span v-if="scope.row.buildnum == null">暂无</span>
              <span v-else>{{ scope.row.buildnum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homenum" label="房号">
            <template slot-scope="scope">
              <span v-if="scope.row.homenum == null">暂无</span>
              <span v-else>{{ scope.row.homenum }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homename" label="房主">
            <template slot-scope="scope">
              <span v-if="scope.row.homename == null">暂无</span>
              <span v-else>{{ scope.row.homename }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homedesk" label="书桌">
            <template slot-scope="scope">
              <span v-if="scope.row.homedesk == null">暂无</span>
              <span v-else>{{ scope.row.homedesk }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homechair" label="椅子">
            <template slot-scope="scope">
              <span v-if="scope.row.homechair == null">暂无</span>
              <span v-else>{{ scope.row.homechair }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="homeclothes" label="衣橱">
            <template slot-scope="scope">
              <span v-if="scope.row.homeclothes == null">暂无</span>
              <span v-else>{{ scope.row.homeclothes }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createtime" label="授予时间" width="200">
            <!-- 插槽 -->
            <template slot-scope="scope">
              {{ scope.row.createtime.substring(0, 10) }} {{ Number(scope.row.createtime.substring(11, 13)) + 8 }}
              {{ scope.row.createtime.substring(13, 19) }}
            </template>
          </el-table-column>
          <el-table-column prop="familystatus" label="状态">
            <!-- 插槽 -->
            <template slot-scope="scope">
              <div v-if="scope.row.familystatus == 1">完好</div>
              <div v-else>待维修</div>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="状态操作" width="200px" prop="familystatus">
            <template slot-scope="scope">
              <el-tooltip :content="'Switch value: ' + scope.row.familystatus" placement="top">
                <el-switch v-model="scope.row.familystatus" active-color="#13ce66" inactive-color="#ff4949"
                  :active-value="1" :inactive-value='2' @change=handleClick(2,scope.row)>
                </el-switch>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="iPagination.currentPage" :page-sizes="iPagination.pageSizes" :page-size="iPagination.pageSize"
          layout="total, sizes, prev, pager, next" :total="iPagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      iPagination: {
        // 默认选中哪一页
        currentPage: 1,
        // 定义每列有多少条列表
        pageSizes: [5, 10, 20, 50, 100],
        // 默认定义每页多少条
        pageSize: 10,
        // 定义总条数
        total: null,
        // // 页码
        // page:1,
        // // 每页多少条
        // rows:10,
      },
      formInline: {
        smartstatus: "",
        homenum: "",
        value: ["", ""],
        familystatus: "",
      },
      tableData: [],
      time: ""
    }
  },

  methods: {
    handleTitle(val) {
      if (val == 1) {
        this.title = '智能设备'
        this.$refs.znsb.style.background = '#fff'
        this.$refs.jjsb.style.background = '#f5f7fa'
        this.$refs.znsb.style.borderBottom = ''
        this.$refs.jjsb.style.borderBottom = '1px solid #ccc'
      } else {
        this.title = '家居设备'
        this.$refs.jjsb.style.background = '#fff'
        this.$refs.znsb.style.background = '#f5f7fa'
        this.$refs.jjsb.style.borderBottom = ''
        this.$refs.znsb.style.borderBottom = '1px solid #ccc'
      }
    },
    // 状态,更新数据
    handleClick(index, row) {
      if (index == 1) {
        this.$confirm('确定更新该智能设备状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Axios({
            url: '/house/updatesmartStatus',
            method: 'post',
            data: {
              id: row.id,
              smartstatus: row.smartstatus
            },
            success: (result) => {
              this.$message({
                showClose: true,
                message: '编辑成功',
                type: 'success',
              })
              this.handleServe()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更新'
          });
        });
      } else {
        this.$confirm('确定更新该家居设备状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Axios({
            url: '/house/updatefamilyStatus',
            method: 'post',
            data: {
              id: row.id,
              familystatus: row.familystatus
            },
            success: (result) => {
              this.$message({
                showClose: true,
                message: '编辑成功',
                type: 'success'
              })
              this.handleServe()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消更新'
          });
        });
      }
    },
    // 渲染数据
    handleServe() {
      this.handleTitle(1)
      this.$Axios({
        url: '/house/searchdeviceList',
        method: 'get',
        data: {
          smartstatus: this.formInline.smartstatus,
          familystatus: this.formInline.familystatus,
          homenum: this.formInline.homenum,
          startDate: this.formInline.value[0],
          endDate: this.formInline.value[1],
          currPage: this.iPagination.currentPage - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          // console.log(this.tableData, 11);
          this.iPagination.total = result.total;
        }
      })
    },
    // 查询
    search() {
      const start = this.formInline.value[0];
      const isoString = start.toISOString();
      console.log(isoString); // 输出类似于 "2024-05-23T12:45:30.000Z" 的字符串
      const startTime = new Date(isoString)
      startTime.setHours(startTime.getHours() + 8);
      console.log(startTime.toISOString().substring(0, 10));

      const end = this.formInline.value[1];
      const isoString1 = end.toISOString();
      console.log(isoString1); // 输出类似于 "2024-05-23T12:45:30.000Z" 的字符串
      const endTime = new Date(isoString1)
      endTime.setHours(endTime.getHours() + 8);
      this.$axiosToken({
        url: '/house/searchdeviceList',
        method: 'get',
        data: {
          smartstatus: this.formInline.smartstatus,
          familystatus: this.formInline.familystatus,
          homenum: this.formInline.homenum,
          startDate: startTime.toISOString().substring(0, 10),
          endDate: endTime.toISOString().substring(0, 10),
          currPage: this.iPagination.currentPage - 1,
          pageNum: this.iPagination.pageSize,
        },
        success: (result) => {
          this.tableData = result.data
          setTimeout(() => {
            this.loading = false;
          }, 100)
        }
      })
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.iPagination.pageSize = val
      this.handleServe()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.iPagination.currentPage = val
      this.handleServe()
    }
  },
  mounted() {
    this.handleServe()
  },
}
</script>
<style lang="scss" scoped>
.post::v-deep {
  .el-button {
    border-color: #ccc;
  }

  .xqbut {
    color: #62a8ea;

    &:hover {
      border-color: #62a8ea;
      background: unset;
    }
  }

  .gdbut {
    border-color: #fbc4c4;

    &:hover {
      border-color: #f56c6c;
      background: unset;
      color: unset;
    }
  }

  .el-form {
    // display: flex;
    // justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;
      // width: 18%;

      &:nth-child(6) {
        width: 26%;
        text-align: right;
        margin-right: 0;
      }

      .el-form-item__content {
        width: 100%;

        .el-input {
          width: 100%;
        }

        .el-select {
          width: 100%;
        }

        input {
          font-size: 14px;
        }

        button {
          font-size: 14px;
        }
      }
    }
  }

  .post-main {
    border: 1px solid #ccc;
    margin-top: 20px;

    .main-title {
      display: flex;
      justify-content: space-between;

      span {
        cursor: pointer;
      }

      span:nth-child(1) {
        font-size: 14px;
        display: inline-block;
        color: #389af9;
        background: #fff;
        padding: 10px 20px;
        border-right: 1px solid #ccc;
        width: 8%;
        box-sizing: border-box;
      }

      span:nth-child(2) {
        font-size: 14px;
        display: inline-block;
        color: #389af9;
        background: #fff;
        padding: 10px 20px;
        border-right: 1px solid #ccc;
        width: 8%;
        box-sizing: border-box;
      }

      span:last-child {
        width: 92%;
        background: #f5f7fa;
        border-bottom: 1px solid #ccc;
      }
    }

    // border: 1px solid #ccc;
    // padding: 10px;
    // margin-top: 10px;
    .main-con {
      padding: 20px;

      .el-table {

        th,
        td {
          font-size: 14px;
          text-align: center;
        }


        .has-gutter {
          tr {
            background: #eef1f6;
          }

          .el-table__cell {
            background: #eef1f6;
            border-right: 1px solid #c2c2c28a;
            font-size: 14px;
            font-weight: 600;
            color: #000000c0;
          }
        }
      }
    }

    .el-pagination {
      text-align: right;
    }
  }


}
</style>
